<script setup lang="ts">
import * as THREE from "three";
import { ref, onMounted } from "vue";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import gsap from "gsap";
import * as dat from "dat.gui";

// 初始化场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.z = 30;

// 相机放入到场景中
// camera.position.set(0, 0, 0.01);

const useBox = () => {
  const materials: THREE.MeshBasicMaterial[] = [];

  const texture_right = new THREE.TextureLoader().load(
    "./images/livingRoom/living_r.jpg"
  );
  materials.push(new THREE.MeshBasicMaterial({ map: texture_right }));

  const texture_left = new THREE.TextureLoader().load(
    "./images/livingRoom/living_l.jpg"
  );
  materials.push(new THREE.MeshBasicMaterial({ map: texture_left }));

  const texture_up = new THREE.TextureLoader().load(
    "./images/livingRoom/living_u.jpg"
  );
  materials.push(new THREE.MeshBasicMaterial({ map: texture_up }));

  const texture_down = new THREE.TextureLoader().load(
    "./images/livingRoom/living_d.jpg"
  );
  materials.push(new THREE.MeshBasicMaterial({ map: texture_down }));

  const texture_front = new THREE.TextureLoader().load(
    "./images/livingRoom/living_f.jpg"
  );
  materials.push(new THREE.MeshBasicMaterial({ map: texture_front }));

  const texture_back = new THREE.TextureLoader().load(
    "./images/livingRoom/living_b.jpg"
  );
  materials.push(new THREE.MeshBasicMaterial({ map: texture_back }));

  // 创建几何体
  const geometry = new THREE.BoxGeometry(10, 10, 10);
  // 创建材质
  // const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  // 创建网格
  const box = new THREE.Mesh(geometry, materials);
  box.geometry.scale(1, 1, -1);
  // 将网格添加到场景中
  scene.add(box);
};

const useSphere = () => {
  const sphereGeometry = new THREE.SphereGeometry(1, 50, 50);
  sphereGeometry.scale(1, 1, -1);
  const texture = new THREE.TextureLoader().load("./images/scene.jpeg");
  const sphereMaterial = new THREE.MeshBasicMaterial({ map: texture });

  const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  scene.add(sphere);
};

// useBox();
// useSphere();

window.addEventListener("resize", () => {
  // 更新相机的宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新相机的投影矩阵
  camera.updateProjectionMatrix();
  // 更新渲染器的大小
  renderer.setSize(window.innerWidth, window.innerHeight);
});

// const materials: THREE.MeshBasicMaterial[] = [];

// const texture_right = new THREE.TextureLoader().load('./images/livingRoom/living_r.jpg');
// materials.push(new THREE.MeshBasicMaterial({ map: texture_right }));

// const texture_left = new THREE.TextureLoader().load('./images/livingRoom/living_l.jpg');
// materials.push(new THREE.MeshBasicMaterial({ map: texture_left }));

// const texture_up = new THREE.TextureLoader().load('./images/livingRoom/living_u.jpg');
// materials.push(new THREE.MeshBasicMaterial({ map: texture_up }));

// const texture_down = new THREE.TextureLoader().load('./images/livingRoom/living_d.jpg');
// materials.push(new THREE.MeshBasicMaterial({ map: texture_down }));

// const texture_front = new THREE.TextureLoader().load('./images/livingRoom/living_f.jpg');
// materials.push(new THREE.MeshBasicMaterial({ map: texture_front }));

// const texture_back = new THREE.TextureLoader().load('./images/livingRoom/living_b.jpg');
// materials.push(new THREE.MeshBasicMaterial({ map: texture_back }));

// 创建几何体
const geometry = new THREE.BoxGeometry(10, 10, 10);
// const v3 = new THREE.Vector3(0, 0, 0);
// const e3 = new THREE.Euler(0, 10, 0);
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建网格
const box = new THREE.Mesh(geometry, material);
box.geometry.scale(1, 1, -1);

// box.position.x = 10;
// box.position.y = 10;
// box.position.set(10, 10, 0);
// box.position.copy(v3);
// box.rotation.copy(e3);
// 将网格添加到场景中
scene.add(box);

// gsap.to(box.position, { x: 5, duration: 2 });
// gsap.to(box.position, { y: 5, duration: 1 });
// gsap.to(box.rotation, { z: 5, duration: 2 });

// 图形化控制界面
const gui = new dat.GUI();
// gui.add(box.position, 'x').name('移动x轴').min(-5).max(5).step(0.1);
// gui.add(box.position, 'y').name('移动y轴').min(-5).max(5).step(0.1);
// gui.add(box.position, 'z').name('移动z轴').min(-5).max(5).step(0.1);
// gui.addColor({ color: 0x00ff00 }, 'color').name('修改颜色').onChange((e) => { 
//   box.material.color = new THREE.Color(e);
// })

const boxFolder = gui.addFolder("立方体属性");
boxFolder.add(box.position, 'x').name('移动x轴').min(-5).max(5).step(0.1);
boxFolder.add(box.position, 'y').name('移动y轴').min(-5).max(5).step(0.1);
boxFolder.add(box.position, 'z').name('移动z轴').min(-5).max(5).step(0.1);
boxFolder.add(box.rotation, 'x').name('旋转x轴').min(-5).max(5).step(0.1);
boxFolder.add(box.rotation, 'y').name('旋转y轴').min(-5).max(5).step(0.1);
boxFolder.add(box.rotation, 'z').name('旋转z轴').min(-5).max(5).step(0.1);
boxFolder.addColor({ color: 0x00ff00 }, 'color').name('修改颜色').onChange((e) => { 
  box.material.color = new THREE.Color(e);
})

const params = {
  visible: true,
  moveAnimation: () => { 
    gsap.to(box.position, { x: 5, duration: 2 });
  }
}

boxFolder.add(params, 'visible').name('是否可见').onChange((e) => { 
  box.visible = e;
});
boxFolder.add(params, 'moveAnimation').name('移动动画');
boxFolder.open();

const cameraFolder = gui.addFolder("相机属性");
cameraFolder.add(camera.position, 'x').name('相机x轴').min(-30).max(30).step(0.1);
cameraFolder.add(camera.position, 'y').name('相机y轴').min(-30).max(30).step(0.1);
cameraFolder.add(camera.position, 'z').name('相机z轴').min(-30).max(30).step(0.1);
cameraFolder.add(camera.rotation, 'x').name('相机旋转x轴').min(-5).max(5).step(0.1);
cameraFolder.add(camera.rotation, 'y').name('相机旋转y轴').min(-5).max(5).step(0.1);
cameraFolder.add(camera.rotation, 'z').name('相机旋转z轴').min(-5).max(5).step(0.1);
cameraFolder.open();


// 轨道控制器对象
let controls: OrbitControls;
// 坐标辅助器
const axesHelper = new THREE.AxesHelper(20);
scene.add(axesHelper);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);

const container = ref<HTMLElement | null>(null);

const render = () => {
  // box.position.x += 0.01;
  // box.rotation.x += 0.01;
  // if(box.position.x > 5) {
  //   box.position.x = 0;
  //   box.rotation.x = 0;
  // }
  renderer.render(scene, camera);
  requestAnimationFrame(render);
};

onMounted(() => {
  if (container.value) {
    // 添加轨道控制器
    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.update();

    container.value.appendChild(renderer.domElement);
    render();
  }
});
</script>

<template>
  <div ref="container" class="container"></div>
</template>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100vw;
  height: 100vh;
}
</style>
